<template>
  <div class="timeline-wrap">
    <div
      class="timeline"
      ref="timeline"
      @mousedown="startDrag"
      @mousemove="onDrag"
      @mouseup="stopDrag"
      @mouseleave="stopDrag"
      @scroll="onScroll"
    >
      <div
        v-for="(time, index) in times"
        :key="index"
        class="time-item"
        :class="{ active: selectedTime === time }"
        @click="selectTime(time)"
      >
        {{ time }}
      </div>
      <div class="timeline-line"></div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, watch, onUnmounted } from "vue";

const props = defineProps<{
  times: string[];
  showTime: string;
}>();

const emit = defineEmits(["timeSelected"]);

const timeline = ref<HTMLElement | null>(null);
const selectedTime = ref("");
const isDragging = ref(false);
const startX = ref(0);
const scrollLeft = ref(0);

const selectTime = (time: string) => {
  if (selectedTime.value !== time) {
    selectedTime.value = time;
    emit("timeSelected", time);
  }
};

const startDrag = (e: MouseEvent) => {
  if (!timeline.value) return;
  isDragging.value = true;
  startX.value = e.pageX - timeline.value.offsetLeft;
  scrollLeft.value = timeline.value.scrollLeft;
};

const stopDrag = () => {
  isDragging.value = false;
};

const onDrag = (e: MouseEvent) => {
  if (!isDragging.value || !timeline.value) return;
  e.preventDefault();
  const x = e.pageX - timeline.value.offsetLeft;
  const walk = (x - startX.value) * 2;
  timeline.value.scrollLeft = scrollLeft.value - walk;
};

// const scrollToEnd = () => {
//   if (timeline.value) {
//     timeline.value.scrollLeft = timeline.value.scrollWidth;
//   }
// };

const scrollToTime = () => {
  if (timeline.value && props.showTime) {
    const timeIndex = props.times.indexOf(props.showTime);
    if (timeIndex !== -1) {
      const timeItems = timeline.value.querySelectorAll(".time-item") as any;
      if (timeItems[timeIndex]) {
        const scrollPosition =
          timeItems[timeIndex].offsetLeft - timeline.value.clientWidth / 2 + timeItems[timeIndex].offsetWidth / 2;
        timeline.value.scrollLeft = Math.max(0, scrollPosition);
      }
    }
  }
};

const selectLatestTime = () => {
  if (props.showTime) {
    // const latestTime = props.times[props.times.length - 1];
    selectTime(props.showTime);
  }
};

const updateLineWidth = () => {
  if (timeline.value) {
    const timelineWidth = timeline.value.scrollWidth;
    const timelineLine = timeline.value.querySelector(".timeline-line") as HTMLElement;
    if (timelineLine) {
      timelineLine.style.width = `${timelineWidth}px`;
    }
  }
};

onMounted(() => {
  scrollToTime();
  selectLatestTime();
  updateLineWidth(); // 初始化时更新线条宽度
});

watch(
  () => props.showTime,
  () => {
    scrollToTime();
    selectLatestTime();
    updateLineWidth(); // 当时间列表变化时更新线条宽度
  }
);

// 在滚动事件中更新线条宽度
const onScroll = () => {
  updateLineWidth();
};

onMounted(() => {
  if (timeline.value) {
    timeline.value.addEventListener("scroll", onScroll);
  }
});

// 别忘了在组件卸载时移除事件监听
onUnmounted(() => {
  if (timeline.value) {
    timeline.value.removeEventListener("scroll", onScroll);
  }
});
</script>

<style scoped>
.timeline-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: rgb(45 44 44 / 70%);
}
.timeline {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 100%;
  padding: 20px 0;
  overflow-x: auto;
  cursor: grab;
  user-select: none;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}
.timeline::-webkit-scrollbar {
  display: none; /* Chrome, Safari and Opera */
}
.timeline:active {
  cursor: grabbing;
}
.time-item {
  position: relative;
  z-index: 1;
  flex: 0 0 100px;
  margin: 0 6px;
  font-size: 20px;
  color: #ffffff;
  text-align: center;
  cursor: pointer;
}
.time-item::after {
  position: absolute;
  bottom: -10px;
  left: 50%;
  width: 10px;
  height: 10px;
  content: "";
  background-color: #1890ff;
  border-radius: 50%;
  transform: translateX(-50%);
}
.time-item.active {
  font-weight: bold;
  color: #1890ff;
}
.time-item.active::after {
  bottom: -12px;
  width: 14px;
  height: 14px;
}
.timeline-line {
  position: absolute;
  bottom: 20px;
  left: 0;
  z-index: 0;
  width: 100%; /* 确保线的宽度与内容一致 */
  min-width: 100%;
  height: 2px;
  background-color: #3b85de;
}
</style>
